<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pbani在线</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="static/css/demos.css?version={{ version }}">
    <style>
        .demos-title {
            text-align: center;
            font-size: 34px;
            color: #3cc51f;
            font-weight: 400;
            margin: 0 15%;
        }

        .demos-sub-title {
            text-align: center;
            color: #888;
            font-size: 14px;
        }

        .demos-header {
            padding: 35px 0;
        }

        .demos-content-padded {
            padding: 15px;
        }

        .demos-second-title {
            text-align: center;
            font-size: 24px;
            color: #3cc51f;
            font-weight: 400;
            margin: 0 15%;
        }

        footer {
            text-align: center;
            font-size: 14px;
            padding: 20px;
        }

        footer a {
            color: #999;
            text-decoration: none;
        }

        a.weui-bar__item--on.weui-tabbar__item div#chat_img {
            background-image: url({{ url_for('static', filename='images/msg_on.png') }});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        a.weui-tabbar__item div#chat_img {
            background-image: url({{ url_for('static', filename='images/msg.png') }});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        a.weui-bar__item--on.weui-tabbar__item div#loc_img {
            background-image: url({{ url_for('static', filename='images/location_on.png') }});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        a.weui-tabbar__item div#loc_img {
            background-image: url({{ url_for('static', filename='images/location.png') }});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        a.weui-bar__item--on.weui-tabbar__item div#mng_img {
            background-image: url("{{ url_for('static', filename='images/mng_on.png') }}");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        a.weui-tabbar__item div#mng_img {
            background-image: url({{ url_for('static', filename='images/mng.png') }});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .weui-tabbar__label {
            color: #27AF9F;
        }

        .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label {
            color: #E3767D;
        }
    </style>
</head>
<script>
    function f() {
        $('.weui-tab__bd').css('height', $('.weui-tab__bd').height())
        $('#iframe').css('height', $('#iframe').height())
    }
</script>
<body onload="f()">
<div class="weui-tab">
    <div class="weui-tab__bd" style="height: 92vh;position:relative;">
        <iframe id="iframe" style="width: 100%;height: 92vh; border: 0;" src="/view_device"></iframe>
    </div>


    <div class="weui-tabbar" style="position: relative">
        <!--      <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
        <!--<a href="#demo" class="weui-tabbar__item" onclick="changeIframeSrc('/demo');">
            <div class="weui-tabbar__icon">
                <img src="{{ url_for('static', filename='images/icon_nav_article.png') }}" alt="">
            </div>
            <p class="weui-tabbar__label">设备列表</p>
        </a>-->
        <a href="#map" class="weui-tabbar__item" onclick="changeIframeSrc('/device_map');">
            <div class="weui-tabbar__icon" id="loc_img">
            </div>
            <p class="weui-tabbar__label">定位轨迹</p>
        </a>
        <a href="#view" class="weui-tabbar__item weui-bar__item--on" onclick="changeIframeSrc('/view_device');">
            <div class="weui-tabbar__icon" id="mng_img">
            </div>
            <p class="weui-tabbar__label">功能管理</p>
        </a>
        <a href="#record" class="weui-tabbar__item" onclick="changeIframeSrc('/record');">
            <div class="weui-tabbar__icon" id="chat_img">
            </div>
            <p class="weui-tabbar__label">收发消息</p>
        </a>
    </div>
</div>

<!--引入微信JS-SDK-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript"
        src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.2/script/jquery.jscrollpane.min.js"></script>
<!--<script type="text/javascript" src="{{ url_for('static', filename='js/scroll-startstop.events.jquery.js') }}"></script>-->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
<script src="{{ url_for('static', filename='js/common.js') }}"></script>
<script>
    var socket;
    //var sn = "{{ device_sn }}"
    var openid = getCookie("openid");
    var current_room = openid;
    var wx_ready = false;

    function changeIframeSrc(urlStr) {
        $("#iframe").attr("src", urlStr);
    }

    var join_room = function (room) {
        socket.emit('join', room, function () {
            //change_title()
        })

    };

    $(function () {
        if (location.href.indexOf("demo") > -1) {
            $("#iframe").attr("src", "/demo");
        } else if (location.href.indexOf("map") > -1) {
            $("#iframe").attr("src", "/device_map");
        } else if (location.href.indexOf("record") > -1) {
            $("#iframe").attr("src", "/record");
        } else if (location.href.indexOf("view") > -1) {
            $("#iframe").attr("src", "/view_device");
        } else if (location.href.indexOf("add") > -1) {
            $("#iframe").attr("src", "/add_device");
        }

        __main();//建立socket

        $.ajax({
            type: 'post',
            url: '/get_signature',
            dataType: 'json',
            data: {
                url: location.href
            },
            success: function (data) {
                console.log(data)
                 wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appid, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.noncestr, // 必填，生成签名的随机串
                    signature: data.signature, // 必填，签名，见附录1
                    jsApiList: ['scanQRCode', 'startRecord', 'stopRecord', 'playVoice', 'uploadVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function () {
                    wx_ready = true;

                });
                wx.error(function (res) {
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                    console.log(res);
                });
            }
        })
    });

    var __main = function () {
        var namespace = '/chat'

        var url = "ws://" + document.domain + ":" + location.port + namespace
        socket = io.connect(url, {transports: ['websocket']})

        //log提示connected
        socket.on('connect', function () {
            console.log('web connected')
        })
        //加入room
        join_room(current_room)
        //接收用户出入消息
        socket.on('status', function (data) {
            //chat_area.value += "<" + data + ">\n"
        })
        //接收聊天消息
        socket.on('self_message', function (data) {
            debugger;
            if ($("#iframe").attr("src").indexOf("record") > -1) {
                $("#iframe")[0].contentWindow.add_msg_display(data)
            } else {
                /*$.alert("注意", "您有新的消息，请注意查收。", function () {
                    $("#iframe").attr("src", "/record")
                    $('#iframe').load(function () {
                        $("#iframe")[0].contentWindow.get_msg_list();
                        $("#iframe")[0].contentWindow.add_msg_display(data)
                    });
                });*/
            }
        })

        socket.on('device_message', function (data) {
            debugger;
            if ($("#iframe").attr("src").indexOf("record") > -1) {
                $("#iframe")[0].contentWindow.add_msg_display(data)
            } else {
                $.alert("注意", "您有新的消息，请注意查收。", function () {
                    $("#iframe").attr("src", "/record")
                    $('#iframe').load(function () {
                        $("#iframe")[0].contentWindow.get_msg_list_add(data);
                    });
                });
            }
        })

        $(window).unload(function () {
            socket.emit('leave', current_room, function () {
            })
        });
    }


</script>

</body>
</html>
